// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);
$('#btnChooseImage').on('click', function () {
  $('#file').click()


})

//=======change事件注册给谁？=======
$('#file').on('change', function () {
  //获取用户选择的文件==》文件域（dom对象)files属性
  let file = this.files[0]
  if (!file) {
    //当file不存在==》用户点击了取消，file就是undefined,阻止后续代码执行（否则会报错）
    return
  }
  //console.log(file);
  //注意，直接设置图片的src的值。不起效果
  // $image.attr('src',newSrc)
  //把文件对象转为对应的地址
  let newSrc = URL.createObjectURL(file)
  $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newSrc)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
})
//====================================
$('#btnCreateAvatar').click(function () {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  });
  //`base64`格式的字符串，其中含有特殊字符，不能直接作为`avatar`的值，需要将其编码处理`encodeURIComponent`函数处理下参数
  // 把图片转成base64格式
  let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
  console.log(dataURL);
  //axios发送请求
  //encodeURIComponent()是encodeURI的编码加强版，防止里面出现的= &不被解析导致报错
  axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`).then(({ data: { status, message } }) => {
    //console.log(res);
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.msg(message)
    //调用父页面index页面的getUserInfo()函数==》重新渲染展示头像
    window.parent.getUserInfo()
  })
})